import { Component, OnInit, Input, SimpleChanges, OnChanges } from '@angular/core';
declare var $: any;
@Component({
  selector: 'app-personal-record',
  templateUrl: './personal-record.component.html',
  styleUrls: ['./personal-record.component.scss']
})
/**
 * @author csw
 * @description:预约-个人刷脸记录共享业务组件
 * @date 2021-01-28 15:13:20
 */
export class PersonalRecordComponent implements OnInit, OnChanges {
  @Input() personalTimeLineParams: any;
  countNum = 0; // 计算箭头移动的位置
  // 时间轴数组
  timeLines: any[] = [];
  constructor() { }

  ngOnInit() {
  }
  ngOnChanges(changes: SimpleChanges): void {
    if ( changes.personalTimeLineParams) {
      this.timeLines = changes.personalTimeLineParams.currentValue;
    }
  }

  /**
   * 点击nav左侧小三角
   */
  clickLeft() {
    // 外层div的宽
    const par = $('.timeWrap').width();
    // 获取ul元素
    const child = $('.time-horizontal');
    // 获取ul的宽=
    const ulWidth = child.width();
    $('.time-horizontal').animate({
      left: child[0].style.left
    });
    // 如果ul的宽大于外层div的宽，点击左边nav就会向左一定
    if (ulWidth > par) {
      // 判断ul宽度减去左移的距离是否小于外层div的宽度，如果小于，回复初始的位置
      if ((ulWidth - this.countNum * 200) > par) {
        this.countNum++;
        child[0].style.left = '-' + this.countNum * 200 + 'px';
        const pos = child[0].style.left;
      } else {
        this.countNum = 0;
        child[0].style.left = this.countNum + 'px';
      }
    }
    // 添加动画
    $('.time-horizontal').animate({
      left: child[0].style.left
    });
  }

  /**
   * 点击nav右侧小三角
   */
  clickRight() {
    const child = $('.time-horizontal');
    // 过度动画
    $('.time-horizontal').animate({
      left: child[0].style.left
    });
    if (this.countNum >= 1) {
      child[0].style.left = parseInt(child[0].style.left, 10) + 200 + 'px';
      this.countNum--;
    }
    $('.time-horizontal').animate({
      left: child[0].style.left
    });
  }

}
